<template>
  <a-float-button
    tooltip="全文检索"
    type="primary"
    :style="{
      right: '24px',
    }"
    @click="openModal"
  >
    <template #icon>
      <SearchOutlined />
    </template>
  </a-float-button>
  <a-modal
    :width="'60%'"
    v-model:open="open"
    title="Full Text Search"
    :maskClosable="false"
    :footer="null"
  >
    <a-input-search
      v-model:value="kw"
      placeholder="多个词语用空格或者逗号或者分号隔开,多个词语之前是并且关系"
      @search="onSearch"
      enter-button
    />

    <div style="padding: 16px 0px">
      <div style="display: flex; margin-bottom: 16px">
        <div style="flex: 1 1 auto">
          搜索结果共有<span style="color: red">{{ matchList.length }}</span
          >条记录
          <CreateSub></CreateSub>
        </div>

        <div style="flex: 0 0 400px">
          <a-alert type="warning" closable
            ><template #message>
              <a-tag color="red">&nbsp;</a-tag>id匹配
              <a-tag color="#ff0000">&nbsp;</a-tag>name匹配
              <a-tag color="#108ee9">&nbsp;</a-tag>md匹配
              <a-tag color="blue">&nbsp;</a-tag>desc匹配
            </template>
          </a-alert>
        </div>
      </div>
      <a-empty v-if="matchList.length == 0"></a-empty>

      <!-- <template v-for="item in list" :key="item">
        <PmpItemName :id="item" :attr="`nameCn`"></PmpItemName>
      </template> -->

      <div
        style="display: inline-block; margin: 4px"
        v-for="item in matchList"
        :key="item"
      >
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'pmpItemId'"
        >
          <a-tag color="red"
          >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'name_cn'"
        >
          <a-tag color="#ff0000"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'name_en'"
        >
          <a-tag color="#ff0000"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'desc'"
        >
          <a-tag color="blue"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'remark'"
        >
          <a-tag color="blue"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'usage'"
        >
          <a-tag color="blue"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'define'"
        >
          <a-tag color="blue"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>
        <PmpItemNameCustom
          :id="item.pmpItemId"
          v-if="item.matchClassify == 'md'"
        >
          <a-tag color="#108ee9"
            >[{{ item.classify }}]{{ item.nameCn }} [{{ item.matchClassify }}]</a-tag
          >
        </PmpItemNameCustom>

        <EditRelaMd
          v-if="item.matchClassify == 'rela'"
          :mainId="item.pmpItemId"
          :relaId="item.relaId"
          :classify="item.relaClassify"
          :canEdit="true"
          :queryHasValue="false"
        >
          {{ item.nameCn }} <ArrowRightOutlined /> {{ item.relaNameCn }} [{{item.relaClassify}}]
        </EditRelaMd>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { SearchOutlined,ArrowRightOutlined } from "@ant-design/icons-vue";

import pmpHooks from "@/hooks/PmpHooks.js";
import { ref } from "vue";
import CreateSub from "@/components/CreateSub.vue";
import PmpItemNameCustom from "@/components/PmpItemNameCustom.vue";
import EditRelaMd from "@/components/EditRelaMd.vue";

const kw = ref("");

const list = ref([]);

const matchList = ref([]);
async function onSearch() {
  // const res = await pmpHooks.queryPmpItemFullText(kw.value);
  // list.value = res.result;

  const matchRes = await pmpHooks.queryPmpItemFullTextWithClassify(kw.value);
  matchList.value = matchRes.result;
}

const open = ref(false);
function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)
  // console.log('=====', data.value)
  open.value = true;
}
</script>

<style>
</style>